<template>
    <div class="crumbs" :style="isShowBorder?'border-bottom: 1px solid  #FFFFFF':''">
        <template v-if="isShowTitle">
            <div class="line"></div>
            <div class="title">{{title }}</div>
        </template>
        <div class="subTitle" v-if="componentName == 'ParamsSetting'">
            <span class="title">{{subTitle1}} : </span>
            <span class="content">{{content1}}</span>
        </div>
        <div class="subTitle" v-if="componentName == 'ParamsSetting'">
            <span class="title">{{subTitle2}} : </span>
            <span class="content">{{content2}}</span>
        </div>
        <div class="reBack" @click="backToInterface" v-if="componentName == 'record'">
            <i class="el-icon-arrow-left" style="margin: 1px -4px"></i>
            返回
        </div>
    </div>
</template>

<script>
  export default {
    name: "VonCrumbs",
    props:{
      componentName:{
        type:String,
        default:''
      },
      title:{
        type:String,
        default:''
      },
      subTitle1:{
        type:String,
        default:''
      },
      subTitle2:{
        type:String,
        default:''
      },
      content1:{
        type:String,
        default:''
      },
      content2:{
        type:String,
        default:''
      },
      isShowBorder:{
        type:Boolean,
        default:true
      },
      isShowTitle:{
        type:Boolean,
        default:true
      }
    },
    methods:{
      backToInterface(){
        this.$store.commit('changeSelectionInterface',true)
      }
    }
  }
</script>

<style scoped lang="scss">
    .crumbs{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        .line{
            width: 4px;
            height: 14px;
            background: #336CB5;
            margin-right: 20px;
        }
        .title{
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #B9C5DD;
        }
        .subTitle{
            margin-right: 20px;
            .title{
                width: 121px;
                height: 16px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #FEFFFF;
                line-height: 40px;
                margin-right: 10px;
            }
            .content{
                width: 132px;
                height: 16px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: rgba(17, 255, 251, 1);
                line-height: 40px;
            }
        }
        .reBack{
            cursor: pointer;
            color: white;
            font-size: 14px;
            padding-right: 20px;
            margin-left: auto;
        }
    }
</style>
